<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/login.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个spacer用来占位 -->
        <span class="spacer"></span>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>

    <!-- 页面主题 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <!-- .card表示用户信息 -->
            <div class="card">
                <img src="./image/profile.jpg" alt="">
                <h3>frost-cold</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 表示一篇博客 -->
            <!-- <div class="blog">
                <div class="title">这是第一篇博客</div>
                <div class="date">2024-05-02 12:00:00</div>
                <div class="desc">今日事今日毕 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, quaerat harum, ad quia quos maxime nostrum consectetur sequi architecto laborum quas facilis nulla provident neque. Inventore recusandae pariatur fuga quaerat?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div> -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="js/app.js"></script>
    <script>
        // 通过这个函数从服务器获取博客列表的数据
        function getBlogs() {
            $.ajax({
                type: 'get',
                url: 'blog',
                success: function(body) {
                    // 根据返回的json数据，来构造出页面内容
                    // jquery ajax会把响应得到的body自动根据响应的Content-Type进行格式转换
                    // 如果响应的Content-Type是json，那么这里会自动把body转换成js对象
                    let container = document.querySelector('.container-right');
                    for(let blog of body) {
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 创建博客标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);
                        // 创建博客时间
                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = blog.postTime;
                        blogDiv.appendChild(dateDiv);
                        // 创建博客内容
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = blog.content;
                        blogDiv.appendChild(descDiv);
                        // 查看全文按钮
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文 >>';
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a);

                        container.appendChild(blogDiv);
                    }
                }
            });
        }
        getBlogs();
        // 验证登录
        checkLogin();
        // 获取用户信息
        function getUserInfo() {
            $.ajax({
                type: 'get',
                url: 'userInfo',
                // 后端状态码为200才触发success
                success: function(body) {
                    let h3 = document.querySelector('.card h3');
                    h3.innerHTML = body.username;
                }
            });
        }
        getUserInfo();
    </script>
</body>
</html>